<template>
  <div class="set-params" @click="($event) => $event.stopPropagation()">
    <div class="description">
      <div class="table-container">
        <!-- 参数项 -->
        <!-- <div  v-for="(param, index) in setParams" :key="index" >-->
        <div
          v-for="(param, index) in setParams"
          :key="index"
          class="params-item"
        >
          <!-- 参数名称 -->
          <div class="configuration-item-name">
            <div class="item-name">
              <a-tooltip
                placement="top"
                :overlay-style="{ fontSize: '12px' }"
                :destroy-tooltip-on-hide="true"
              >
                <template slot="title">
                  <span>{{ param.name }}</span>
                </template>
                <div class="item-name-text">
                  {{ param.name }}
                </div>
              </a-tooltip>
            </div>
            <div>:</div>
          </div>

          <div class="configuration-help">
            <!-- 数值型参数 -->
            <div v-if="param.type === 'number'" class="configuration-item-info">
              <a-input-number
                v-model="param.value"
                class="params-input"
                size="small"
              />
            </div>

            <!-- 整数型 数值参数 -->
            <div v-if="param.type === 'int'" class="configuration-item-info">
              <a-input-number
                v-model="param.value"
                class="params-input"
                size="small"
                :precision="0"
              />
            </div>

            <!-- 字符串型参数 -->
            <div
              v-else-if="param.type === 'string'"
              class="configuration-item-info"
            >
              <a-input
                ref="paramInput"
                v-model="param.value"
                type="string"
                :placeholder="param.value"
                class="params-input"
                size="small"
              ></a-input>
            </div>

            <!--  复选框参数 feature_cols  输入列 -->
            <div
              v-else-if="param.type === 'checkbox'"
              class="checkbox-item-info"
            >
              <div v-if="param.newFeatures.length === 0" class="no-father-node">
                -- 请确认节点父子关系 --
              </div>
              <!-- 多张表 的情况  -->
              <div
                v-for="(table, tableIndex) in param.newFeatures"
                :key="'output' + tableIndex"
                class="table-checkbox"
              >
                <div
                  v-if="tableIndex === 0"
                  :class="{ 'parting-line': tableIndex > 0 }"
                >
                  <!-- 全选 todo 多表问题 多张表用一个 value array-->
                  <!-- 20200918  NAP 424 只显示第一张表-->
                  <span class="select-all">
                    <a-checkbox
                      :checked="
                        table.tableCols.length === param.value.length &&
                        param.value.length !== 0
                      "
                      @change="selectAll(table, tableIndex, index, $event)"
                      >全选</a-checkbox
                    >
                  </span>
                  <br />
                  <!-- value： Array<string> '表名.列名' -->
                  <span
                    v-for="(item2, index2) in table.tableCols"
                    :key="index2"
                    class="checkbox-label"
                  >
                    <a-checkbox
                      :checked="
                        param.value.includes(table.tableName + '.' + item2)
                      "
                      :value="item2"
                      @change="onChange($event, index, table.tableName)"
                    >
                      <a-tooltip placement="top">
                        <template slot="title">
                          <!-- <span>{{item2}}({{transformColumnType(item.columnTypes[index2])}})</span>-->
                          <span
                            >{{ item2 }}({{ table.columnTypes[index2] }})</span
                          >
                        </template>
                        <span class="btn">
                          {{ item2 }}
                        </span>
                      </a-tooltip>
                    </a-checkbox>
                  </span>
                  <br />
                </div>
              </div>
            </div>
            <!-- select 参数 -->
            <div
              v-else-if="param.type === 'select'"
              class="configuration-item-info"
            >
              <a-select
                v-model="param.value"
                class="params-select"
                size="small"
              >
                <a-select-option
                  v-for="(item, index) in param.items"
                  :key="index"
                  :value="item"
                >
                  {{ item }}
                </a-select-option>
              </a-select>
            </div>
            <!-- 参数项提示信息 -->
            <span class="help-tips">
              <a-tooltip
                v-show="param.tips"
                placement="top"
                :overlay-style="{ fontSize: '12px' }"
                :destroy-tooltip-on-hide="true"
              >
                <template slot="title">
                  <span>{{ param.tips }}</span>
                </template>
                <a-icon-font type="iconbangzhu" />
              </a-tooltip>
            </span>
          </div>
        </div>
        <!-- </div>-->
      </div>
    </div>
    <!--  footer  -->
    <div class="footer-buttons">
      <div class="btn import-btn" @click="confirm()">确定</div>
      <div class="btn cancel-btn" @click="cancelChange">取消</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Watch } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'
import { cloneDeep } from 'lodash'

@Component
export default class SetParameters extends Vue {
  // 配置项
  public setParams: any = []

  public beforeMount() {
    this.initSet()
  }

  private get selectNode() {
    return DataViewStore.selectNode
  }
  // 监听激活的节点
  @Watch('selectNode', { deep: true })
  private changeSelectNode(selectNode: any) {
    if (selectNode) {
      this.initSet()
    } else {
      this.setParams = []
    }
  }

  public initSet() {
    this.setParams = cloneDeep(this.selectNode.data.setParams)
  }

  // 输入列选择
  public onChange(event: any, idx: number, tableName: string) {
    if (event.target.checked) {
      this.setParams[idx].value.push(`${tableName}.${event.target.value}`)
    } else {
      // value： Array<string>  '表名.列名'
      const index = this.setParams[idx].value.indexOf(
        `${tableName}.${event.target.value}`
      )
      if (index > -1) {
        this.setParams[idx].value.splice(index, 1)
      }
    }
  }

  /**
   * 全选功能
   * @param item 输入表
   * @param index 表索引
   * @param idx 参数索引
   * @param $event
   */
  public selectAll(item: any, index: number, idx: number, $event: any) {
    if ($event.target.checked) {
      item.tableCols.forEach((column: string) => {
        const selectIndex = this.setParams[idx].value.indexOf(
          `${item.tableName}.${column}`
        )
        if (selectIndex < 0) {
          this.setParams[idx].value.push(`${item.tableName}.${column}`)
        }
      })
    } else {
      item.tableCols.forEach((column: string) => {
        const selectIndex = this.setParams[idx].value.indexOf(
          `${item.tableName}.${column}`
        )
        if (index > -1) {
          this.setParams[idx].value.splice(selectIndex, 1)
        }
      })
    }
  }

  // 确认编辑
  public confirm() {
    // 校验 string input value
    const verifyValue = true
    // this.setParams.forEach((parametersItem: any) => {
    //   if(parametersItem.type === 'string') {
    //     const c = /^[A-Za-z]\w{1,20}$/
    //     verifyValue = c.test(parametersItem.value)
    //   }
    // })
    if (verifyValue) {
      this.$emit('confirm', { setParams: this.setParams })
    } else {
      this.$message.warning('输入值不合法, 请检查！')
    }
  }

  /**
   * 取消修改
   */
  public cancelChange() {
    this.initSet()
    this.$emit('cancel')
  }
}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/set-params/setParams';
/* 内容 */
.table-container {
  .params-item {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 16px;
    width: 100%;

    /* 配置名称 */
    .configuration-item-name {
      align-items: center;
      display: flex;
      height: 17px;
      line-height: 17px;
      margin-bottom: 6px;
      width: 100%;

      .item-name {
        align-items: center;
        cursor: pointer;
        display: flex;
        justify-content: flex-start;
        margin-right: 2px;

        .item-name-text {
          color: #5d637e;
          font-size: 12px;
          letter-spacing: 0.86px;
          max-width: 100%;
        }
      }
    }

    /* 配置项 - 帮助 */
    .configuration-help {
      align-items: center;
      display: flex;
      justify-content: space-between;
      width: 100%;

      /* 配置项 */
      .configuration-item-info {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        margin-right: 8px;
        width: calc(100% - 20px);

        .params-input {
          width: 100%;
        }

        .params-select {
          width: 100%;
        }
      }

      /* 帮助 */
      .help-tips {
        cursor: pointer;
        font-size: 18px;
        line-height: 100%;
        width: 20px;
      }
    }

    /* 输入列选择 配置项同级 configuration-item-info */
    .checkbox-item-info {
      background: #f1f1f1;
      border-radius: 4px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      margin-right: 8px;
      padding: 8px;
      width: calc(100% - 20px);

      /* 复选框 背景 */
      .table-checkbox {
        /* 全选 */
        .select-all {
          display: inline-block;
          height: 26px;
          line-height: 26px;
        }

        /* 表输入列  */
        .checkbox-label {
          display: inline-block;
          height: 26px;
          line-height: 26px;
          margin-left: 0;
          overflow: hidden;
          padding-right: 6px;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 33%;

          /deep/ .ant-checkbox-wrapper {
            align-items: center;
            display: flex;
            width: 100%;

            > span:last-child {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: calc(100% - 18px);

              .btn {
                display: inline-block;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }

        /* 多表分割线 */
        .parting-line {
          border-top: 1px solid rgba(0, 0, 0, 0.35);
          margin-top: 12px;
          padding-top: 12px;
        }
      }

      /* 没有父节点 */
      .no-father-node {
        background: #f1f1f1;
        border-radius: 4px;
        color: #222432;
        font-size: 12px;
        height: 24px;
        letter-spacing: 1.12px;
        line-height: 24px;
        opacity: 0.5;
        text-align: center;
      }
    }
  }
}
</style>
